<template>
    <div>
        <el-table border
                  :data="tableData" stripe
                  style="width: 100%;height: 100%"
                  @selection-change="handleSelectionChange">
            <el-table-column
                    label="序号"
                    type="index"
                    width="50"
                    align="center">
                <template slot-scope="{row, $index}">
                    <span>{{(curPage - 1) * 10 + $index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="taskName" label="任务名称" :min-width="120">
                <template slot-scope="{row, $index}">
                    <span>{{row.taskName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="subName" label="调查点名" :min-width="200">
                <template slot-scope="{row, $index}">
                    <span>{{row.subName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" prop="name" label="联系人" :min-width="80">
                <template slot-scope="{row, $index}">
                    <span>{{row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" prop="phone" label="电话" :min-width="150">
                <template slot-scope="{row, $index}">
                    <span>{{row.phone}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="x" label="经度" :min-width="110">
                <template slot-scope="{row, $index}">
                    <span>{{row.x}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="y" label="纬度" :min-width="110">
                <template slot-scope="{row, $index}">
                    <span>{{row.y}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="data" label="操作" :min-width="160">
                <template slot-scope="{row, $index}">
                    <el-row v-if="canEdit">
                        <el-col :span="12">
                            <el-button class="el-button el-button--mini el-button--success"
                                       @click="opDialog2(row.id)">修改
                            </el-button>
                        </el-col>
                        <el-col :span="12">
                            <el-button class="el-button el-button--mini el-button--danger"
                                       @click="opDialog(row.id)">删除
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-button class="el-button el-button--mini el-button--danger" v-else
                               @click="opDialog(row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <msg-dialog @yes="deleteTask" @no="onCancel" :dialog-visible="dialogVisible"
                    :msg="msg"></msg-dialog>
        <el-dialog
                title="修改调查点信息"
                :visible.sync="dialogVisible2"
                width="48%"
                v-if="dialogVisible2"
                :before-close="handleClose">
            <new-node ref="newDataForm" :id="chooseId"
                      @updateData="updateData"/>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="submitForm" v-loading.fullscreen.lock="fullscreenLoading">保 存</el-button>
    </span>
        </el-dialog>
    </div>
</template>
<script>
    import qs from 'qs';
    import MsgDialog from "../menu/MsgDialog";
    import NewNode from "../form/NewNode";

    export default {
        name: "NodeTable",
        components: {
            NewNode,
            MsgDialog
        },
        data() {
            return {
                msg: '确定删除此行政村点',
                editTaskName: false,
                editRemark: false,
                multipleSelection: [],
                dialogVisible: false,
                dialogVisible2: false,
                chooseId: '',
                fullscreenLoading: false
            }
        },
        props: {
            tableData: {
                type: Array,
                defult: []
            },
            curPage: {
                type: Number,
                defult: 1
            },
            canEdit: {
                type: Boolean,
                defult: true
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            endEdit(event) {
                this.editTaskName = false;
                this.editRemark = false;
            },
            enterBlur(event) {
                event.target.blur()
            },
            deleteTask() {
                axios.post("/bjdzms/releaseSubtask/del",
                    qs.stringify({
                        'id': this.chooseId
                    })).then(data => {
                    this.total = data.data;
                    this.dialogVisible = false;
                    this.$emit('updateData');
                });
            },
            updateData() {
                this.$emit('updateData');
                this.fullscreenLoading = false;
                this.dialogVisible2 = false;
            },
            opDialog(id) {
                this.dialogVisible = true;
                this.chooseId = id;
            },
            opDialog2(id) {
                this.dialogVisible2 = true;
                this.chooseId = id;
            },
            onCancel() {
                this.dialogVisible = false;
                this.chooseId = '';
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.taskTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.taskTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            resetDateFilter() {
                this.$refs.taskTable.clearFilter('data');
            },
            clearFilter() {
                this.$refs.taskTable.clearFilter();
            },
            formatter(row, column) {
                return row.address;
            },
            submitForm() {
                this.$refs.newDataForm.submitForm();
                this.fullscreenLoading = true;
            }
        },
    }
</script>

<style scoped>

</style>
